<template>
    <div id="userManager">
        <div id="addAndSearch">
            <div id="add">
                <el-button round type="primary" @click="addDialogVisible = true"
                >增加用户</el-button
                >
                <el-dialog
                        title="增加用户"
                        :visible.sync="addDialogVisible"
                        width="50%"
                        :before-close="handleClose"
                >
                    <div>
                        <el-form ref="form" :model="form" label-width="80px">
                            <el-form-item label="姓名">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-input v-model="form.sex"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄">
                                <el-input v-model="form.age"></el-input>
                            </el-form-item>
                            <el-form-item label="电话">
                                <el-input v-model="form.telephone"></el-input>
                            </el-form-item>
                            <el-form-item label="薪水">
                                <el-input v-model="form.salary"></el-input>
                            </el-form-item>
                            <el-form-item label="编号">
                                <el-input v-model="form.employ_number"></el-input>
                            </el-form-item>
                            <el-form-item label="入职时间">
                            <el-date-picker
                                    v-model="form.entry_time"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                            </el-form-item>
                            <el-form-item label="状态">
                                <el-radio-group v-model="form.status">
                                    <el-radio label="在岗"></el-radio>
                                    <el-radio label="离职"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="form.remarks"></el-input>
                            </el-form-item>
                            <el-form-item label="权限">
                                <el-radio-group v-model="form.power">
                                    <el-radio label="管理员"></el-radio>
                                    <el-radio label="护工"></el-radio>
                                    <el-radio label="健康管家"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-form>
                    </div>
                    <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button
                    type="primary"
                    @click="
                addDialogVisible = false,
                onSubmit()"
            >立即创建</el-button
            >
          </span>
                </el-dialog>
            </div>
            <div id="search">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-select v-model="value" filterable placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <el-input v-model="formInline.search"   @keyup.enter="onSearch()" placeholder="输入"></el-input>

                    <el-form-item>
                        <el-button type="primary" @click="onSearch()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div id="formDiv">
            <el-table
                    :data="UserList"
                    border
                    highlight-current-row
                    style="width: 1235px"
            >
                <el-table-column fixed prop="id" label="用户编号" width="100">
                </el-table-column>
                <el-table-column fixed prop="account_number" label="账户" width="100">
                </el-table-column>
                <el-table-column prop="uname" label="姓名" width="70">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="50">
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="50">
                </el-table-column>
                <el-table-column prop="telephone" label="电话" width="110">
                </el-table-column>
                <el-table-column prop="salary" label="薪水" width="80">
                </el-table-column>
                <el-table-column prop="employ_number" label="员工编号" width="140">
                </el-table-column>
                <el-table-column prop="entry_time" label="入职时间" width="110">
                </el-table-column>
<!--                <el-table-column prop="status" label="人员状态" width="80">-->
<!--                </el-table-column>-->
<!--                <el-table-column prop="pwd" label="密码" width="100">-->
<!--                </el-table-column>-->
                <el-table-column prop="power" label="权限" width="100">
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="144">
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                @click="
                centerDialogVisible = true,
                editButton(scope.row)
              "
                                size="small"
                        >编辑</el-button
                        >
                        <el-button @click="delClick(scope.row)" type="text" size="small"
                        >刪除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="editDialog">
            <el-dialog
                    title="修改用户资料"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center
            >
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="姓名">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-input v-model="form.sex"></el-input>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input v-model="form.age"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="form.telephone"></el-input>
                        </el-form-item>
                        <el-form-item label="薪水">
                            <el-input v-model="form.salary"></el-input>
                        </el-form-item>
                        <el-form-item label="员工编号">
                            <el-input v-model="form.employ_number"></el-input>
                        </el-form-item>
                        <el-form-item label="人员状态">
                            <el-radio-group v-model="form.status">
                                <el-radio label="在岗"></el-radio>
                                <el-radio label="离职"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remarks"></el-input>
                        </el-form-item>
                        <el-form-item label="权限">
                            <el-radio-group v-model="form.power">
                                <el-radio label="管理员"></el-radio>
                                <el-radio label="护工"></el-radio>
                                <el-radio label="健康管家"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false,resetForm()">取 消</el-button>
          <el-button
                  type="primary"
                  @click="
              centerDialogVisible = false,
              editClick()
            "
          >确 定</el-button
          >
        </span>
            </el-dialog>
        </div>
        <el-row style="float: right;margin: 0">
        <label>当前为第{{this.page.nowpage}}页，共计{{this.page.totalpage}}页</label>
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()">上一页</el-button>
                <el-button type="primary" @click="increase_page()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                          v-model="page.page_input"
                ></el-input>
                <el-button type="primary" @click="change_page()">Go!</el-button>
            </el-form-item>
        </el-form>
    </el-row>
    </div>
</template>

<script>
    import qs from 'qs'
    const axios = require("axios");
    export default {
        mounted() {
            this.getUser("1");
        },
        methods: {
            onSubmit() {
                //增加用戶按鈕
                console.log(this.form);
                // if (this.form.name == "" || this.form.power == "" || this.form.pwd == "" || this.form.employ_number == "" || this.form.age == "" || this.form.salary == "" || this.form.sex == "" || this.form.telephone == "") {
                //     alert("请输入完整信息");
                // } else {
                //     this.addUser();
                // }
                this.addUser();
            },
            searchById(search) {
                if (search == "") {
                    this.getUser("1");
                    this.page.nowpage = 1;
                } else {
                    axios({
                        method: 'post',
                        url: '/api/usermanager_page/getUserById',
                        data: qs.stringify({'id':search}),
                    })
                        .then(
                            (res) => {
                                console.log(res);
                                this.$data.UserList = res.data.data
                                this.page.nowpage = 1;
                            },
                            (res) => {
                            }
                        );
                }

            },
            searchByName(search,page) {
                if (search == "") {
                    this.getUser(1);
                    this.page.nowpage = 1;
                } else {
                    axios({
                        method: 'post',
                        url: '/api/usermanager_page/getUserByName',
                        data: qs.stringify({'name':search,'page':page}),
                    })
                        .then(
                            (res) => {
                                console.log(res);
                                this.UserList = res.data.data.user_list;
                                this.page.totalpage=res.data.data.total_page;
                                this.page.nowpage = 1;
                            },
                            (res) => {
                            }
                        );
                }

            },
            delClick(row) {
                //刪除功能
                //row為當前用戶的數據
                console.log(row);
                this.delUser(row.id);
            },
            editButton(row) {
                this.form.name = row.uname;
                this.form.pwd = row.pwd;
                this.form.power = row.power;
                this.form.employ_number = row.employ_number;
                this.form.age = row.age;
                this.form.salary = row.salary;
                this.form.sex = row.sex;
                this.form.remarks = row.remarks;
                this.form.status = row.status;
                this.form.id = row.id;
                this.form.telephone = row.telephone;
                this.form.account_number = row.account_number;
                this.form.entry_time = row.entry_time;
            },
            onSearch() {
                console.log(this.formInline.search);
                console.log(this.$data.page.nowpage);
                if (this.value == "id") {
                    this.searchById(this.formInline.search);
                    this.page.nowpage=1;
                } else {
                    this.searchByName(this.formInline.search,1)
                    this.page.nowpage=1;
                }

            },
            resetForm() {
                this.form.name = "";
                this.form.power = "";
                this.form.remarks = "";
                this.form.telephone = "";
                this.form.sex = "";
                this.form.salary = "";
                this.form.age = "";
                this.form.employ_number = "";
                this.form.account_number = "";
                this.form.status = "";
                this.form.id = "";
                this.form.pwd = "";
                this.form.entry_time = "";
            },
            handleClose(done) {
                this.$confirm("确认关闭？")
                    .then((_) => {
                        done();
                    })
                    .catch((_) => {
                    });
            },
            handleCurrentChange(val) {
                /*console.log(val);*/
                this.getUser(val);
                this.nowpage = val;
            },
            getUser(page) {
                axios({
                    method: 'post',
                    url: '/api/usermanager_page/getUser',
                    data: qs.stringify({'page': page}),
                }).then(
                    (res) => {
                        console.log(res);
                        this.UserList = res.data.data.user_list;
                        this.page.totalpage = res.data.data.total_page;
                    },
                    (res) => {
                    }
                );
            },
            addUser() {
                const form = this.$data.form;
                axios({
                    method: 'post',
                    url: '/api/usermanager_page/addUser',
                    data: qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            console.log("addFinish");

                            this.getUser(this.page.nowpage);
                        },
                        (res) => {
                        }
                    );
            },
            delUser(id) {

                axios({
                    method: 'post',
                    url: '/api/usermanager_page/delete_person',
                    data: qs.stringify({"id":id,"leaving_time":id}),
                })
                    .then(
                        (res) => {
                            console.log(res.data);
                            this.getUser(this.page.nowpage);
                        },
                        (res) => {
                        }
                    );
            },
            editClick() {
                const form = this.$data.form
                axios({
                    method: 'post',
                    url: '/api/usermanager_page/editUser',
                    data: qs.stringify(this.$data.form),
                })
                    .then(
                        (res) => {
                            this.getUser(this.page.nowpage);
                            this.resetForm();
                        },
                        (res) => {
                        }
                    );
            },
            increase_page() {
                if(this.page.nowpage<this.page.totalpage) {
                    this.$data.page.nowpage++;
                    if(this.formInline.search=='') {
                        this.getUser(this.page.nowpage);
                    }
                    else{
                        if(this.value=='name') {
                            this.searchByName(this.formInline.search, this.page.nowpage);
                        }
                        else{
                            this.searchById(this.formInline.search);
                        }
                    }
                }
            },
            decrease_page() {
                if (this.$data.page.nowpage > 1) {
                    this.$data.page.nowpage--;
                    if(this.formInline.search==''){
                        this.getUser(this.page.nowpage);
                    }
                    else{
                        if(this.value=='name'){
                            this.searchByName(this.formInline.search,this.page.nowpage)
                        }
                        else{
                            this.searchById(this.formInline.search);
                        }
                    }
                }
            },
            change_page() {
                let num = parseInt(this.$data.page_input);
                if (isNaN(num)) {
                    alert("请输入正确的数字！");
                    this.$data.page.page_input = '';
                } else if (num <= 0) {
                    alert("请输入正整数！");
                    this.$data.page.page_input = '';
                } else {
                    this.$data.page.current_page = num;
                    if(this.formInline.search==''){
                        this.getUser(this.page.nowpage);
                    }
                    else{
                        if(this.value=='name'){
                            this.searchByName(this.formInline.search,this.page.nowpage)
                        }
                        else{
                            this.searchById(this.formInline.search);
                        }
                    }
                }
            },
        },
        data() {
            return {
                UserList: [
                    {
                        id:"",
                        uname:"",
                        sex:"",
                        age:"",
                        salary:"",
                        telephone:"",
                        employ_number:"",
                        account_number:"",
                        pwd:"",
                        power: "",
                        status:"",
                        remarks: "",
                        entry_time:"",
                    },
                ],
                page: {
                    nowpage:1,
                    totalpage:1,
                    page_input:"",
                },
                addDialogVisible: false, //add彈出框屬性
                centerDialogVisible: false, //
                formInline: {
                    search: "",
                },

                editId: "",
                options: [
                    {
                        value: "id",
                        label: "用户编号",
                    },
                    {
                        value: "name",
                        label: "用户名",
                    },
                ],
                value:'',
                form: {
                    //用戶資料
                    name: "",
                    sex:"",
                    salary:"",
                    age:"",
                    telephone:"",
                    employ_number:"",
                    entry_time:"",
                    power: "",
                    remarks:"",
                    status:"",
                    account_number:"",
                    pwd:"",
                    id:"",
                },
            };
        },
    };
</script>

<style>

    #userManager {
        width: 100%;
        height: 100%;
    }
    #userManager #formDiv{
        margin-left: 40px;
        margin-right: 40px;
    }
    #userManager #addAndSearch {
        padding: 20px;
        width: 100%;
        height: 50px;
    }
    #userManager #addAndSearch .el-input {
        width: 200px;
    }
    #userManager #addAndSearch #add {
        float:left;
    }
    #userManager #addAndSearch #search {
        float: right;
        margin-right: 60px;
    }
    #userManager #addAndSearch #search .el-input {
        width: 120px;
    }
    #userManager #page {
        bottom: 0;
        left:50%;
        position: absolute;
    }
    /*#userManager #formDiv .el-table th,#userManager #formDiv .el-table tr,#userManager #formDiv .el-table__empty-block,#userManager .el-table__row td*/
    /*{*/
    /*    border: 1px solid #CBCBCB;*/
    /*    background-color: #EEEEEE;*/
    /*}*/
</style>

